<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index" >
				<view :class="{'active':isActive === index}" @click="checked(index)">
				{{item.title}}<text style="color: red;">({{item.length}})</text>
				</view>
			</view>
		</view>
			<view class="nav_item" v-if="isActive==0">
				<view class="newBxBox">
					<view class="top">
						<text>未完成<text style="color: red;">({{oneLength}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in resR" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 65%;">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YDRNUM}}</p>
								<p style="font-size: 24rpx;padding-left: 20rpx;color: red;" v-if="item.YTHYY!=''">退回原因：{{item.YTHYY}}</p>
								<p style="font-size: 24rpx;padding-left: 20rpx;">地址：{{item.ADDRESS}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">{{item.DSTAT==3 ? '处理中' : '还未派单'}}</p>
								<p style="color: gray;font-size: 28rpx;padding-left: 20rpx;">申报人：{{item.PROPOSER}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申报时间：{{item.REPDAT+' '+item.REPTIM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">派单时间：{{item.YPDTIME}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">受理时间：{{item.SERTIME}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item.YDRNUM)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 100rpx;">
								{{item.DSTAT==3 && item.SERPSON==userInfo.NAME ? (item.SERTIME=='' ? '受理' : '登记') : '详情'}} ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view class="newBxBox">
					<view class="top">
						<text>待抢单<text style="color: red;">({{oneLengthDpd}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in resR2" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 65%;">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YDRNUM}}</p>
								<p style="font-size: 24rpx;padding-left: 20rpx;">地址：{{item.ADDRESS}}</p>
								<p style="font-size: 12rpx;padding-left: 20rpx;">问题：{{item.REPCONT}}</p>
								<p style="color: gray;font-size: 28rpx;padding-left: 20rpx;">受理人员：{{item.SERPSON}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">受理时间：{{item.SERTIME}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item.YDRNUM)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 100rpx;">
								{{item.DSTAT==1 ? '抢单' : '抢单'}} ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==2">
				<view class="newBxBox">
					<view class="top">
						<text>待确认<text style="color: red;">({{oneLength2}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YDRNUM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">责任人：{{item.SERPSON}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申报时间：{{item.REPDAT+' '+item.REPTIM}}</p>
								<!-- <p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">派单时间：{{item.SERTIME}}</p> -->
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">整改时间：{{item.FINDAT+' '+item.FINTIM}}</p>
							</view>							
							<view class="y" @click="wslGotoCd(item.YDRNUM)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 100rpx;">
									{{item.DSTAT==4 && item.PROPOSER==userInfo.NAME ? '确认' : '详情'}} ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==3">
				<view class="newBxBox">
					<view class="top">
						<text>已完成<text style="color: red;">({{oneLength22}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData2" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YDRNUM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">责任人：{{item.SERPSON}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申报时间：{{item.REPDAT+' '+item.REPTIM}}</p>
								<!-- <p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">派单时间：{{item.SERTIME}}</p> -->
								<!-- <p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">维修时间：{{item.FINDAT+' '+item.FINTIM}}</p> -->
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">完成时间：{{item.YWCTIME}}</p>
							</view>							
							<view class="y" @click="wslGotoCd(item.YDRNUM)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 100rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==4">
				<view class="newBxBox">
					<view class="top">
						<text>已关闭<text style="color: red;">({{oneLength3}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in thereData" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z">
								<p style="font-size: 28rpx;padding-left: 20rpx;margin-top: 15rpx;">单号：{{item.YDRNUM}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">申报人：{{item.PROPOSER}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申报时间：{{item.REPDAT+' '+item.REPTIM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">关闭时间：{{item.YCLOTIME}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item.YDRNUM)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 100rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				resR:[],
				resR2:[],
				twoData:[],
				twoData2:[],
				thereData:[],
				navList:[
					{
						index: 0,
						title: '未完成',
						length: 0,
					},{
						index: 1,
						title: "待抢单",
						length: 0,
					},
					{
						index: 2,
						title: "待确认",
						length: 0,
					},{
						index: 3,
						title: "已完成",
						length: 0,
					},{
						index: 4,
						title: "已关闭",
						length: 0,
					}
				],
				userInfo: {},
				oneLength:0,
				oneLengthDpd:0,
				oneLength2:0,
				oneLength22:0,
				oneLength3:0,
				dataList:[],
			}
		},
		onShow() {
		  this.checked(this.isActive);  // 根据当前标签的索引调用对应的接口
		},
		onLoad(query) {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			async checked(index) {
				this.isActive = index
				let GRP1 = {
						GRP1: [{
							SERPSON:this.userInfo.NAME,//维修人
							PROPOSER:this.userInfo.NAME,//维修人
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTXDR2",GRP1)
				
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1
					for (var i = 0; i < this.dataList.length; i++) {
						if(this.dataList[i].REPDAT!=''){
							var dat = this.dataList[i].REPDAT
							this.dataList[i].REPDAT = dat.slice(0,4)+'-'+dat.slice(4,6)+'-'+dat.slice(6,8)
						}
						if(this.dataList[i].FINDAT!=''){
							var dat2 = this.dataList[i].FINDAT
							this.dataList[i].FINDAT = dat.slice(0,4)+'-'+dat.slice(4,6)+'-'+dat.slice(6,8)							
						}
					}
					this.resR=[]
					this.resR2=[]
					this.twoData=[]
					this.twoData2=[]
					this.thereData=[]
					for (var i = 0; i < this.dataList.length; i++) {
						if(this.dataList[i].YDRNUM!=''){
							if(this.dataList[i].DSTAT<=3
								&& (this.dataList[i].PROPOSER==this.userInfo.NAME 
									|| this.dataList[i].SERPSON==this.userInfo.NAME
									|| this.dataList[i].PRONAME==this.userInfo.NAME)){
								this.resR.push(this.dataList[i])
							}
							if(this.dataList[i].DSTAT==4){
								this.twoData.push(this.dataList[i])
							}
							if(this.dataList[i].DSTAT==5){
								this.twoData2.push(this.dataList[i])
							}
							if(this.dataList[i].DSTAT==6){
								this.thereData.push(this.dataList[i])
							}
							if(this.dataList[i].DSTAT==1 && this.dataList[i].SERPSON==''){
								this.resR2.push(this.dataList[i])
							}
						}
					}
					this.oneLength = this.resR.length
					this.oneLengthDpd = this.resR2.length
					this.oneLength2 = this.twoData.length
					this.oneLength22 = this.twoData2.length
					this.oneLength3 = this.thereData.length
					this.navList[0].length = this.oneLength
					this.navList[1].length = this.oneLengthDpd
					this.navList[2].length = this.oneLength2
					this.navList[3].length = this.oneLength22
					this.navList[4].length = this.oneLength3
				
					console.log(this.resR,'this.resR');
					console.log(this.resR2,'this.resR2');
					console.log(this.twoData,'this.twoData');
					console.log(this.thereData,'this.thereData');
				return
			},
			wslGotoCd(a){
				uni.navigateTo({url:"/pages/bxdzglPages/bxdzglPages?num="+a})
				return
			}
		}
	}
</script>

<style>
.tab_nav{
	background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #13d5f6;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 8rpx;
		background-color:  #13d5f6;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.newBxBox{
		margin-top: 25rpx;
		background-color: white;
	}
	.top{
		height: 50rpx;
		line-height: 50rpx;
		color: gray;
		padding-left: 20rpx;
	}
	.container{
		/* height: 250rpx; */
		border: 1px solid #ccc;
		display: flex;
		margin-bottom: 20rpx;
	}
	.container-left{
		width: 20%;
		border: 1px solid #ccc;
	}
	.container-right{
		width: 80%;
		display: flex;
	}
</style>
